<template>
  <div style="padding: 0.2rem">
    <div>
      <el-form
        ref="ruleFormRef"
        style="max-width: 100%"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <!-- 活动基本信息 -->
        <P style="margin-bottom: 0.1rem">基本活动信息</P>
        <div style="display: flex; flex-wrap: wrap; box-shadow: 0 0 0.05rem #ccc; padding: 0.2rem">
          <el-form-item label="活动名称:" prop="activity_name" required>
            <el-input v-model="ruleForm.activity_name" style="width: 1.7rem" />
          </el-form-item>
          <el-form-item label="活动类型：" prop="activity_type" required>
            <el-select
              v-model="ruleForm.activity_type"
              placeholder="请选择活动类型"
              style="width: 1.7rem"
            >
              <el-option label="线上活动" value="线上活动" />
              <el-option label="线下活动" value="线下活动" />
            </el-select>
          </el-form-item>
          <el-form-item label="活动开始时间：" required>
            <el-date-picker
              style="width: 1.7rem"
              v-model="ruleForm.activity_Begin_time"
              type="datetime"
              placeholder="请选择活动开始时间"
            />
          </el-form-item>

          <el-form-item label="活动结束时间：" required>
            <el-date-picker
              style="width: 1.7rem"
              v-model="ruleForm.activity_end_time"
              type="datetime"
              placeholder="请选择活动结束时间"
            />
          </el-form-item>
        </div>

        <!-- 活动限制-->
        <p style="margin-top: 0.2rem; margin-bottom: 0.1rem">活动限制</p>
        <div style="box-shadow: 0 0 0.05rem #ccc; padding: 0.2rem">
          <el-form-item label="活动定义：" prop="Activity_Definition">
            <el-checkbox-group v-model="ruleForm.Activity_Definition">
              <el-checkbox value="宣传活动：" name="Activity_Definition"> 宣传活动 </el-checkbox>
              <el-checkbox value="vip专属活动：" name="Activity_Definition">vip专属活动</el-checkbox>
              <el-checkbox value="福利发放活动：" name="Activity_Definition">福利发放活动</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="参与活动人员等级限制：" prop="Activity_Level_Restrictions">
            <el-checkbox-group v-model="ruleForm.Activity_Level_Restrictions">
              <el-checkbox value="vip1" name="Activity_Level_Restrictions"> vip1 </el-checkbox>
              <el-checkbox value="vip2" name="Activity_Level_Restrictions"> vip2 </el-checkbox>
              <el-checkbox value="vip3" name="Activity_Level_Restrictions"> vip3 </el-checkbox>
              <el-checkbox value="vip4" name="Activity_Level_Restrictions"> vip4 </el-checkbox>
              <el-checkbox value="vip5" name="Activity_Level_Restrictions"> vip5 </el-checkbox>
              <el-checkbox value="svip" name="Activity_Level_Restrictions"> svip </el-checkbox>
              <el-checkbox value="贫民" name="Activity_Level_Restrictions"> 贫民 </el-checkbox>
              <el-checkbox value="均可" name="Activity_Level_Restrictions"> 均可 </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>

        <!-- 活动详情 -->
        <p style="margin-top: 0.2rem; margin-bottom: 0.1rem">活动详情信息</p>
        <div style="margin-bottom: 0.1rem; box-shadow: 0 0 0.05rem #ccc; padding: 0.2rem">
          <el-form-item label="活动资源：" prop="Activity_Resources">
            <el-radio-group v-model="ruleForm.Activity_Resources">
              <el-radio value="赞助">赞助</el-radio>
              <el-radio value="自营">自营</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="活动描述：" prop="activity_describe">
            <el-input
              v-model="ruleForm.activity_describe"
              type="textarea"
              style="width: 2rem"
              rows="10"
            />
          </el-form-item>

          <el-form-item label="活动图片：" prop="desc">
            <el-upload
              style="border: 1px solid black"
              class="avatar-uploader"
              action="http://localhost:3000/dqj_user/uploadimg"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img style="width: 300px" v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </div>
        <!-- 活动奖品 -->
        <p style="margin-top: 0.2rem; margin-bottom: 0.1rem">活动奖品</p>
        <div style="margin-bottom: 0.1rem; box-shadow: 0 0 0.05rem #ccc; padding: 0.2rem">
          <el-form-item label="活动奖品：" prop="active_jiangpin">
            <el-form-item label="一等奖" prop="active_jiangpin.one_jiangpin">
              <el-input
                v-model="ruleForm.active_jiangpin.one_jiangpin"
                type="textarea"
                style="width: 2rem;margin-bottom: 0.15rem"
              />
            </el-form-item>
            <el-form-item label="二等奖" prop="active_jiangpin.two_jiangpin">
              <el-input
                v-model="ruleForm.active_jiangpin.two_jiangpin"
                type="textarea"
                style="width: 2rem;margin-bottom: 0.15rem"
              />
            </el-form-item>
            <el-form-item label="三等奖" prop="active_jiangpin.three_jiangpin">
              <el-input
                v-model="ruleForm.active_jiangpin.three_jiangpin"
                type="textarea"
                style="width: 2rem;margin-bottom: 0.15rem"
              />
            </el-form-item>
            <el-form-item label="安慰奖" prop="active_jiangpin.anweijiangpin">
              <el-input
                v-model="ruleForm.active_jiangpin.anweijiangpin"
                type="textarea"
                style="width: 2rem;margin-bottom: 0.15rem"
              />
            </el-form-item>
          </el-form-item>
        </div>
        <el-form-item>
          <div class="buttom">
            <el-button
              style="width: 200px; height: 40px"
              type="primary"
              @click="submitForm(ruleFormRef)"
            >
              修改
            </el-button>
            <el-button style="width: 200px; height: 40px" @click="tiaozhuan"
              >取消</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
  
  <script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { get_updata_activify,updata_activify } from '@/request/api/api.ts'

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  ruleForm.activity_img = response.msg
}

interface RuleForm {
    _id: string,
  activity_name: string
  activity_type: string
  activity_Begin_time: string
  activity_end_time: string
  Activity_Definition: string[]
  Activity_Level_Restrictions: string[]
  Activity_Resources: string[]
  activity_describe: string
  activity_img: string
  Active_istrue: Boolean
  active_jiangpin: object
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
let ruleForm = reactive<RuleForm>({
    _id: '',    //活动id
  activity_name: '',
  activity_type: '', //活动类型
  activity_Begin_time: '', //活动开始时间
  activity_end_time: '', //活动结束时间
  Activity_Definition: [], //活动定义
  Activity_Level_Restrictions: [], //等级限制
  Activity_Resources: [], //资源
  activity_describe: '', //活动描述
  activity_img: '', //活动图片
  Active_istrue: false,
  active_jiangpin: {
    one_jiangpin: '',
    two_jiangpin: '',
    three_jiangpin: '',
    anweijiangpin: ''
  }
})
const route = useRoute()
const router = useRouter()
onMounted(() => {
  getdata()
})
const getdata = async () => {
  let _id = route.query._id
  let data:any = await get_updata_activify({ id: _id })
  console.log(data.data[0].activity_name);
    ruleForm._id = data.data[0]._id,
    ruleForm.activity_name = data.data[0].activity_name,
    ruleForm.activity_type = data.data[0].activity_type, //活动类型
    ruleForm.activity_Begin_time = data.data[0].activity_Begin_time, //活动开始时间
    ruleForm.activity_end_time = data.data[0].activity_end_time, //活动结束时间
    ruleForm.Activity_Definition = data.data[0].Activity_Definition, //活动定义
    ruleForm.Activity_Level_Restrictions = data.data[0].Activity_Level_Restrictions, //等级限制
    ruleForm.Activity_Resources = data.data[0].Activity_Resources, //资源
    ruleForm.activity_describe = data.data[0].activity_describe, //活动描述
    ruleForm.activity_img = data.data[0].activity_img, //活动图片
    ruleForm.Active_istrue = data.data[0].Active_istrue,
    ruleForm.active_jiangpin = {
      one_jiangpin: data.data[0].active_jiangpin.one_jiangpin,
      two_jiangpin: data.data[0].active_jiangpin.two_jiangpin,
      three_jiangpin:data.data[0].active_jiangpin.three_jiangpin,
      anweijiangpin: data.data[0].active_jiangpin.anweijiangpin,
  }
  imageUrl.value = data.data[0].activity_img
}

const submitForm = async (formEl: FormInstance | undefined) => {
  let data = await updata_activify(ruleForm)
  if (data.code == 200) {
    ElMessage({
      message: `${data.msg}`,
      type: 'success'
    })
    resetForm(ruleFormRef.value)
    imageUrl.value = ''
    router.push('/xxk/publish_activity_list')
  }
  console.log(ruleForm)
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const tiaozhuan=()=>{
  router.go(-1)
}

</script>
  
  <style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px solid yellow;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>